﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Title and other stuffs -->
  <title>胖胖鸟餐饮后台管理系统</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta name="author" content="">
  <!-- Stylesheets -->
  <link href="css/bootstrap.css" rel="stylesheet">
  <!-- Font awesome icon -->
  <link rel="stylesheet" href="css/font-awesome.css"> 
  <!-- jQuery UI -->
  <link rel="stylesheet" href="css/jquery-ui.css"> 
  <!-- Calendar -->
  <link rel="stylesheet" href="css/fullcalendar.css">
  <!-- prettyPhoto -->
  <link rel="stylesheet" href="css/prettyPhoto.css">  
  <!-- Star rating -->
  <link rel="stylesheet" href="css/rateit.css">
  <!-- Date picker -->
  <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
  <!-- CLEditor -->
  <link rel="stylesheet" href="css/jquery.cleditor.css"> 
  <!-- Uniform -->
  <link rel="stylesheet" href="css/uniform.default.css"> 
  <!-- Bootstrap toggle -->
  <link rel="stylesheet" href="css/bootstrap-switch.css">
  <!-- Main stylesheet -->
  <link href="css/style.css" rel="stylesheet">
  <!-- Widgets stylesheet -->
  <link href="css/widgets.css" rel="stylesheet">   
  
  <!-- HTML5 Support for IE -->
  <!--[if lt IE 9]>
  <script src="js/html5shim.js"></script>
  <![endif]-->

  <!-- Favicon -->
  <style>
	input[type='checkbox']
	{
		margin:0px;
		width:16px;
		height:16px;
	}
  </style>
</head>
<body>
<!-- Main content starts -->
<div class="content">
  	<!-- Sidebar -->
    <div class="sidebar">
        <div class="sidebar-dropdown"><a href="#"><h3 style="color:#FFFFFF">导航</h3></a></div>

        <!--- Sidebar navigation -->
        <!-- If the main navigation has sub navigation, then add the class "has_sub" to "li" of main navigation. -->
        <ul id="nav">
          <!-- Main menu with font awesome icon -->
          <li><a href="/index.html"><i class="icon-home"></i> 首页</a>
            <!-- Sub menu markup 
            <ul>
              <li><a href="#">Submenu #1</a></li>
              <li><a href="#">Submenu #2</a></li>
              <li><a href="#">Submenu #3</a></li>
            </ul>-->
          </li>
          <li class="has_sub"><a href="#" class="open"><i class="icon-list-alt"></i>菜品管理<span class="pull-right"><i class="icon-chevron-right"></i></span></a>
            <ul>
               <li><a href="table.html" class="open">菜品查询</a></li>
			  <li><a href="dishadd.html" class="open">菜品新增</a></li>
            </ul>
          </li>  
          <li class="has_sub"><a href="#"><i class="icon-file-alt"></i>信息管理<span class="pull-right"><i class="icon-chevron-right"></i></span></a>
            <ul>
              <li><a href="post.html">销售统计</a></li>
              <li><a href="login.html">详单查询</a></li>
              <li><a href="register.html">客户投诉</a></li>
              <li><a href="support.html">出入库信息</a></li>
            </ul>
          </li> 
          <li class="has_sub"><a href="#"><i class="icon-file-alt"></i>信息查看<span class="pull-right"><i class="icon-chevron-right"></i></span></a>
            <ul>
              <li><a href="media.html">Media</a></li>
              <li><a href="statement.html">Statement</a></li>
              <li><a href="error.html">Error</a></li>
              <li><a href="error-log.html">Error Log</a></li>
              <li><a href="calendar.html">Calendar</a></li>
              <li><a href="table.html">Grid</a></li>
            </ul>
          </li>                             
          <li><a href="charts.html"><i class="icon-bar-chart"></i>图表</a></li> 
          <li><a href="tables.html"><i class="icon-table"></i>表格</a></li>
          <li><a href="forms.html"><i class="icon-tasks"></i>表单</a></li>
          <li><a href="ui.html"><i class="icon-magic"></i>用户接入</a></li>
          <li><a href="calendar.html"><i class="icon-calendar"></i>日程安排</a></li>
        </ul>
    </div>

    <!-- Sidebar ends -->

  	<!-- Main bar -->
  	<div class="mainbar">
      
	    <!-- Page heading -->
	    <div class="page-head">
        <!-- Page heading -->
	      <h2 class="pull-left goback"><i class="icon-chevron-left" ></i> 菜品编辑</h2>


        <!-- Breadcrumb -->
        <div class="bread-crumb pull-right">
          <h2><i class="icon-th-list navicon"></i></h2>
        </div>

        <div class="clearfix"></div>

	    </div>
	    <!-- Page heading ends -->



	    <!-- Matter -->

	    <div class="matter">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="widget wgreen">
                <div class="widget-head wminimize">
                  <div class="pull-left">菜品编辑</div>
                  <div class="widget-icons pull-right">
                    <a href="#"><i class="icon-chevron-up"></i></a>
                  </div>
                  <div class="clearfix"></div>
                </div>

                <div class="widget-content">
                  <div class="padd">
                    <!-- Form starts.  -->
                     <form class="form-horizontal" role="form">
                              
                                <div class="form-group">
                                  <label class="col-lg-4 control-label">菜品名称：</label>
								   <div class="col-lg-8">
                                   	 <input type="text" class="form-control" placeholder="建议输入5个汉字以内">
								  </div>
                                </div>
								
								<div class="form-group">
                                  <label class="col-lg-4 control-label">菜品金额：</label>
								   <div class="col-lg-8">
                                    <div class="input-group">
									 <span class="input-group-addon">￥</span>
									 <input type="text" width="14px"  id="dishmoney" class="form-control" >
									 <span class="input-group-addon">元</span>
								 </div>
                                  </div>
                                </div>
								
								<div class="form-group">
                                  <label class="col-lg-4 control-label">菜品图片：</label>
								   <div class="col-lg-8">
								   	<input type="file" id="fileImage" class="form-control" style="line-height:34px;">
									<div id="imageResult"></div>
                                   </div>
                                </div>
                                <div class="form-group">
                                  <label class="col-lg-4 control-label">是否展示：</label>
                                  <div class="col-lg-8">
									  <div class="make-switch" data-on="danger" data-off="default">
										 <input type="checkbox" checked>
									 </div>
                                  </div>
                                </div>  

                                <div class="form-group">
                                  <label class="col-lg-4 control-label">菜品介绍：</label>
                                  <div class="col-lg-8">
                                    <textarea id="dishinfo" name="input" ></textarea>
                                  </div>
                                </div>                                 
                                
                                    <hr />
                                <div class="form-group">
                                  <div class="col-lg-offset-1 col-lg-9">
                                    <button type="button" class="btn btn-success">确认</button>
                                    <button type="button" class="btn btn-info">取消</button>
									<button type="button" class="btn btn-default" onclick="history.go(-1)">返回</button>
                                    <!--<button type="button" class="btn btn-warning">Warning</button>
                                    <button type="button" class="btn btn-danger">Danger</button>
                                    <button type="button" class="btn btn-primary">Primary</button>-->
                                  </div>
                                </div>
                              </form>
                  </div>
                </div>
                  <div class="widget-foot">
                    <!-- Footer goes here -->
                  </div>
              </div>  

            </div>

          </div>

        </div>
		  </div>

		<!-- Matter ends -->

    </div>

   <!-- Mainbar ends -->	    	
   <div class="clearfix"></div>

</div>
<!-- Content ends -->

<!-- Footer starts -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
            <!-- Copyright info -->
            <p class="copy">Copyright &copy; 2015 | <a href="#">胖胖鸟餐饮管理系统</a> </p>
      </div>
    </div>
  </div>
</footer>
<!-- Footer ends -->

<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span> 

<!-- JS -->
<script src="js/jquery.js"></script> <!-- jQuery -->
<script src="js/bootstrap.js"></script> <!-- Bootstrap -->
<script src="js/jquery-ui-1.9.2.custom.min.js"></script> <!-- jQuery UI -->
<script src="js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
<script src="js/jquery.rateit.min.js"></script> <!-- RateIt - Star rating -->
<script src="js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto -->

<!-- jQuery Flot -->
<script src="js/excanvas.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>

<!-- jQuery Notification - Noty -->
<script src="js/jquery.noty.js"></script> <!-- jQuery Notify -->
<script src="js/themes/default.js"></script> <!-- jQuery Notify -->
<script src="js/layouts/bottom.js"></script> <!-- jQuery Notify -->
<script src="js/layouts/topRight.js"></script> <!-- jQuery Notify -->
<script src="js/layouts/top.js"></script> <!-- jQuery Notify -->
<!-- jQuery Notification ends -->

<script src="js/sparklines.js"></script> <!-- Sparklines -->
<script src="js/jquery.cleditor.js"></script> <!-- CLEditor -->
<script src="js/bootstrap-datetimepicker.min.js"></script> <!-- Date picker -->
<script src="js/jquery.uniform.min.js"></script> <!-- jQuery Uniform -->
<script src="js/bootstrap-switch.min.js"></script> <!-- Bootstrap Toggle -->
<script src="js/filter.js"></script> <!-- Filter for support page -->
<script src="js/custom.js"></script> <!-- Custom codes -->
<script src="js/charts.js"></script> <!-- Charts & Graphs -->

<script language="javascript">
$(document).ready(function(){
	//class="cleditor" 
	var menu = "bold italic underline strikethrough subscript superscript | font size style | color highlight removeformat | bullets numbering | outdent indent | alignleft center alignright justify | undo redo | rule | source";
	var o =$("#dishinfo").cleditor({ controls:menu })[0];
	o.focus();
	//$("#dishinfo").val('');
	//o.updateFrame();
	$("#dishinfo").on('click',function(){
		alert('123')
	})
	o.updateFrame();
	 		var result = document.getElementById("imageResult");
            var input = document.getElementById("fileImage");

            if(typeof FileReader === 'undefined'){
                result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持图片预览</p>";
                //input.setAttribute('disabled','disabled');
            }else{
                input.addEventListener('change',readFile,false);
            }
            
            function readFile(){
                var file = this.files[0];
				if(file == undefined)
				{
					$('#imageResult').html('');
				}
                if(!/image\/\w+/.test(file.type)){
                    alert("请确保文件为图像类型");
                    return false;
                }
				var divwidth = $(this).width();
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    //result.innerHTML = '<img width="'+param.width+'" height="300px" style="max-width:600px;max-height:600px" src="'+this.result+'" alt=""/>'
					//$('#imageResult').attr('style','width:100%;height:200px;background-image: url('+this.result+');background-size: cover;background-repeat:no-repeat;');
					//return false;
					$('#imageResult').html('图片预览：</br><img />');
					$('#imageResult img').attr('src',this.result);
					$('#imageResult img').on('load',function(){
						var maxWidth = $(this).width();
						var maxHeight = $(this).height();
						if(maxWidth > divwidth)
						{
						   var height =	divwidth /  maxWidth * maxHeight;
						   $(this).height(height)
						}
						//$(this).width(param.width).height(param.height);						
					});
                }
            }
})
$('#dishmoney').keyup(function () {
                var reg = $(this).val().match(/\d+\.?\d{0,2}/);
                var txt = '';
                if (reg != null) {
                    txt = reg[0];
                }
                $(this).val(txt);
            }).change(function () {
                $(this).keypress();
                var v = $(this).val();
                if (/\.$/.test(v))
                {
                    $(this).val(v.substr(0, v.length - 1));
                }
});
</script>

</body>
</html>
